<template>
    <div class="flex">
        <div style="width: 200px;">
            <div class="title">固定二级导航</div>
            <y-menu :data="data1"></y-menu>
        </div>
        <div style="width: 200px;">
            <div class="title">treeMenu多级导航</div>
            <y-tree-menu :data="data2"></y-tree-menu>
        </div>
        <div style="width: 200px;">
            <div class="title">tsx多级导航</div>
            <y-infinite-menu :data="data3" active-text-color="#E60000" default-active="1"></y-infinite-menu>
        </div>
    </div>
</template>

<script setup lang="ts">
let data1 = [
    {
        name: '导航1',
        index: '1',
        icon: 'document'
    },
    {
        name: '导航2',
        index: '2',
        icon: 'document'
    },
    {
        name: '导航3',
        index: '3',
        icon: 'document',
        children: [
            {
                name: '导航3-1',
                index: '4'
            }
        ]
    }
]

let data2 = [
    {
        name: '导航1',
        index: '1',
        icon: 'document'
    },
    {
        name: '导航2',
        index: '2',
        icon: 'document'
    },
    {
        name: '导航3',
        index: '3',
        icon: 'document',
        children: [
            {
                name: '导航3-1',
                index: '3-1',
                children: [
                    {
                        name: '导航3-1-1',
                        index: '3-1-1',
                    }
                ]
            }
        ]
    }
]
let data3 = [
    {
        name: '导航1',
        index: '1',
        icon: 'Document'
    },
    {
        name: '导航2',
        index: '2',
        icon: 'Document'
    },
    {
        name: '导航3',
        index: '3',
        icon: 'Document',
        children: [
            {
                name: '导航3-1',
                index: '3-1',
                icon: 'Document',
                children: [
                    {
                        name: '导航3-1-1',
                        index: '3-1-1',
                        icon: 'Document',
                        children: [
                            {
                                name: '导航3-1-1-1',
                                index: '3-1-1-1',
                                icon: 'Document',
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
</script>

<style scoped lang="scss">
.flex {
    display: flex;
    justify-content: space-around;
}
.title {
    margin: 12px 0;
}
svg{
    margin-right: 4px;
}
</style>
